<template>
  <div class="order divBox">
    <el-card class="box-card" shadow="hover">
      <template v-slot:header>
        <el-tabs v-model="tabGetType" @tab-click="onClickTab">
          <el-tab-pane v-for="item in head" :key="item.type" :label="`${item.label} ${'(' + item.count + ')'}`" :name="item.type.toString()" />
        </el-tabs>
        <order-list-details-header :tabList="tabLists"/>
      </template>
      <order-list-details-table/>
    </el-card>
  </div>
</template>

<script>
import { tabsListHead } from '@/utils/constants'
import { getHeadCountApi } from '@/api/order'
import { mapState, mapActions } from 'vuex'

import orderListDetailsHeader from './orderListDetailsHeader'
import orderListDetailsTable from './orderListDetailsTable'

export default {
  name: 'OrderList',
  components: {
    orderListDetailsHeader,
    orderListDetailsTable
  },
  data() {
    return {
      head: tabsListHead(['全部订单', '普通订单', '拼团订单', '秒杀订单', '砍价订单']),
      tabLists: {}
    }
  },
  computed: {
    ...mapState({
      getType: state => state.order.tableFrom.type
    }),
    tabGetType: {
      get() {
        return this.getType
      },
      set(newVal) {
        this.setOrderTableFromType(newVal)
      }
    }
  },
  watch: {
    head: {
      handler: function(val, oldVal) {
        this.headCount()
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions({
      setOrderTableFromType: 'order/setOrderTableFromType',
      getTabList: 'order/getList'
    }),
    onClickTab() {
      this.headCount()
      this.getTabList()
    },
    // 订单数量
    headCount() {
      getHeadCountApi(this.tabGetType).then(res => {
        this.switchType(res)
        this.tabLists = res
      }).catch(() => {
        this.$message.error('订单数量错误')
      })
    },
    switchType(data) {
      this.head.forEach((item) => {
        switch (item.type) {
          case -1:
            item.count = data.all_Count
            break
          case 0:
            item.count = data.general_Count
            break
          case 1:
            item.count = data.pink_Count
            break
          case 2:
            item.count = data.seckill_Count
            break
          case 3:
            item.count = data.bargain_Count
            break
          default:
            item.count = 0
            break
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
  .order {
    .createDate {
      max-width: 350px;
      width: 100%;
    }
    .seachKeywords {
      max-width: 350px;
      width: 100%;
      .select_field_key {
        max-width: 150px;
        min-width: 80px;
      }
    }
  }
</style>
